<template>
	<view>
		<image src="/static/serve/bg.png" class="bg" mode=""></image>
		<view class="">
			<plhead :height="headh"></plhead>
			<view class="top">
				<u-status-bar bgColor="#f8f8f8"></u-status-bar>
				<view class="head" :style="{height:headh}">
					<image src="/static/serve/title.png" class="head__title" mode=""></image>
					<image src="/static/jied/tbg.png" style="width: 293rpx;height: 23rpx;" mode=""></image>
				</view>
			</view>
		</view>
		<view class="con">
			<view class="searchbox">
				<view class="searchbox__addr">
					深圳市
				</view>
				<image src="/static/serve/down.png" class="searchbox__down" mode=""></image>
				<view class="searchbox__line">

				</view>
				<input type="text" placeholder="搜索" class="searchbox__inp" />
				<view class="searchbox__btn">
					搜索
				</view>
			</view>
			<view class="box"
				:style="{height: 'calc(100vh - 3rpx - 79rpx - 17rpx - 100rpx - 50px - '+$u.addUnit($u.getPx(headh) + $u.sys().statusBarHeight + $u.sys().safeAreaInsets.bottom,'px')+')'}">
				<image src="/static/serve/tibg.png" class="box__title" mode=""></image>
				<view class="u-flex" style="height: calc(100% - 66rpx);margin-top: -4px;">
					<scroll-view scroll-y="true" style="height: calc(100% - 4px);width: 200rpx;" class="left">
						<view style="background-color: #fff;">
							<view v-for="(item,index) in fllist" :key="index" class="left__item"
								:class="[cur==index?'active':'',(cur-1==index)?'bdtr20':'',(cur+1==index)?'bdbr20':'']" @click="cur=index">
								<view class="" style="position: relative;">
									<image src="/static/serve/tbg.png" class="tbg" mode=""></image>
									{{item.name}}
									
								</view>
							</view>
						</view>
					</scroll-view>
					<scroll-view scroll-y="true" style="height:calc(100% - 4px);flex: 1;">
						<view class="u-flex u-flex-y-center u-flex-between u-flex-wrap" style="padding: 0 30rpx;">
							<view class="serv" v-for="(item,index) in flist" :key="index">
								<image src="/static/serve/icon.png" class="serv__icon" mode=""></image>
								{{item.name}}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<tabbar :current="1"></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headh: '103rpx',
				cur: 0,
				fllist:[
					{name:'批发用电申请'},
					{name:'电力运维'},
					{name:'智能电工'},
					{name:'变压器服务'},
					{name:'无功补偿维护'},
					{name:'综合能源服务'},
					{name:'居民商铺'},
					{name:'充电桩安装'},
					{name:'储能安装'},
					{name:'光伏安装'},
					{name:'增值服务'},
				],
				flist:[
					{name:'变配电站巡检'},
					{name:'变压器维修'},
					{name:'变压器安装'},
					{name:'变压器咨询'},
					{name:'缺项治理'},
					{name:'三相不平衡治理'},
				]
			};
		},
		onLoad() {
			uni.hideTabBar()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.head {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		&__title {
			width: 64rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}

	.bg {
		width: 750rpx;
		height: 520rpx;
		position: fixed;
		top: 0;
		left: 0;

	}

	.con {
		padding: 3rpx 30rpx 0;

		.searchbox {
			height: 79rpx;
			background: #FEFEFE;
			border-radius: 37rpx 37rpx 37rpx 37rpx;
			display: flex;
			align-items: center;
			padding: 0 12rpx 0 39rpx;

			&__addr {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #1A1919;
				line-height: 28rpx;
				margin-right: 10rpx;
			}

			&__down {
				width: 16rpx;
				height: 13rpx;
			}

			&__line {
				width: 1rpx;
				height: 25rpx;
				background: #9F9F9F;
				opacity: 0.38;
				margin: 0 18rpx;
			}

			&__inp {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #979797;
				flex: 1;
			}

			&__btn {
				width: 108rpx;
				height: 58rpx;
				background: #07D57E;
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FEFEFE;
				line-height: 28rpx;
			}
		}
	}

	.box {
		margin-top: 17rpx;
		background: #FFFFFF;
		padding: 0 2rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		&__title {
			width: 100%;
			height: 66rpx;
		}
	}

	.left {
		background-color: #F5F5F5;
		border-radius: 0rpx 0 20rpx 20rpx;

		&__item {
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 28rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #565656;
			background-color: #F5F5F5;
		}

		.active {
			background-color: #FFFFFF;
			color: #010F0F;
			font-weight: 800;
		}
		.tbg{
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			left: 0;
			top: 0;
			z-index: 1;
		}
		.bdtr20 {
			border-radius: 0 0 20rpx 0;
		}

		.bdbr20 {
			border-radius: 0 20rpx 0 0;
		}
		
	}
	.serv{
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #767676;
		line-height: 24rpx;
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 40rpx;
		&__icon{
			width: 96rpx;
			height: 96rpx;
			margin-bottom: 20rpx;
		}
		
	}
</style>